<template>
  <div class="recommendation-section">
    <h2 class="section-title">租物推荐</h2>
    <div class="product-grid">
      <!-- 商品卡片 -->
      <ProductCard v-for="product in products" :key="product.id" :product="product" @click="handleProductClick" />
    </div>
    <!-- 查看更多按钮 -->
    <button class="load-more-btn">
      查看更多
      <van-icon name="arrow" />
    </button>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import ProductCard from './ProductCard.vue';

// 商品项接口
import type { Product } from '../data';
import { PRODUCTS } from '../config';

const products = reactive<Product[]>(PRODUCTS);

// 处理产品点击事件
const handleProductClick = (product: Product) => {
  console.log('Product clicked:', product);
  // 这里可以添加导航到产品详情页的逻辑
};
</script>

<style scoped lang="scss">
.recommendation-section {
  background-color: #F7F8F9;
  padding: 20px 0 10px;

  .section-title {
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 17px;
    color: #222222;
    margin-bottom: 20px;
    padding: 0px 16px;
  }

  .product-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }

  // 查看更多按钮
  .load-more-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 139px;
    height: 32px;
    margin: 5px auto;
    background-color: #fff;
    border: 1px solid #999999;
    border-radius: 18px;
    font-size: 14px;
    color: #999999;
    cursor: pointer;
  }
}
</style>
